<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>添加模板</title>
    <link rel="stylesheet" href="../css/style.css"/>
    <link rel="stylesheet" href="../css/font-awesome.min.css"/>
</head>
<body>
<div class="container">
    <div class="header">
        <a href="xuanzemoban.html"><i class="icon-angle-left icon-large"></i></a>添加模板
    </div>
    <div class="search ptb1 text-center">
        <i class="icon-search icon-2x text-66"></i>
        <input class="search-input" type="search" placeholder="输入物料名称或速查码"/>
    </div>
    <div class="main h-flex">
        <!-- 左侧分类列表-->
        <div class="mb-left v-flex">
            <div style="-webkit-box-flex: 1;overflow:auto">
                <div class="item cur"><a href="#">二级分类二级分类二级分类二级分类</a></div>
                <div class="item"><a href="#">分类一分类一分类一分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类一</a></div>
                <div class="item"><a href="#">分类四</a></div>
            </div>
        </div>

        <!-- 右侧物料列表-->
        <div class="v-flex" style="-webkit-box-flex: 1;">
            <!-- 列表头部-->
            <div class="text-center text-66 btn-block ptb1 font24">
                <span class="span4">物料名称</span>
                <span class="span2">规格</span>
                <span class="span2">单位</span>
                <span class="span2">选择</span>
            </div>
            <div class="mb-right" style="overflow:auto;">
                <div class="item">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*5000ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
                <div class="item">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*500ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
                <div class="item">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*500ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
                <div class="item" id="">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*500ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
                <div class="item">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*500ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
                <div class="item">
                    <span class="name">鲤鱼鲤鱼鲤鱼鲤鱼鲤</span>
                    <span class="guige">1*500ml</span>
                    <span class="danwei">斤</span>
                    <span class="select"><i class="icon-ok-sign text-main icon-large"></i></span>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <button class="btn btn-block bg-white" id="next">
            <span class="text-main font32">下一步</span>
            <span class="text-66 font28">(已选中<i id="sel-num">0</i>)</span>
        </button>
    </div>
</div>
<script src="../js/zepto.min.js"></script>
<script src="../js/msgBox.js"></script>
<script>
    //   点击下一步弹出对话框
    $('#next').on('click click', function () {
        $.msgbox({
            msgContent: '<textarea rows="8" id="mb-name" placeholder="请输入" maxlength="15"></textarea><i class="count">0/15</i>',
            showTitle: true,
            title: '模板名称',
            buttons: ['取消', '保存'],
            cancel: function () {
            },
            submit: function () {
                $('.msg-body').append('<div class="font28" style="color:red">模板名称不能为空</div>');
                return false;
            },
            close: false
        });
    });
    //    右侧物料点击效果
    $('.mb-right .item').on('click', function () {
        $(this).toggleClass('cur');
        if ($(this).hasClass('cur'))
            $('#sel-num').text(parseInt($('#sel-num').text()) + 1);
        else
            $('#sel-num').text(parseInt($('#sel-num').text()) - 1);
    });
    //    左侧分类点击效果
    $('.mb-left .item').on('click', function () {
        $(this).siblings().removeClass('cur');
        $(this).addClass('cur');
//        todo something
    });

    $(document).on('input','#mb-name', function () {
        $('.count').text($(this).val().length + '/15');
    })
</script>
</body>
</html>